<template>
	<uni-nav-bar title="蓝宝石膨胀订单" left-icon="left" @clickLeft="navBack" :fixed="true" statusBar></uni-nav-bar>
	<view class="package">
		<input class="uni-input" confirm-type="search" placeholder="搜索手机号/姓名" @confirm="confirm" v-model="search"
			@input="interrogate" />
	</view>
	<!-- 切换 -->
	<view class="package" style="padding:0px">
		<z-tabs ref="tabs" :list="list" :current="current" @change="tabsChange" inactive-color="#333" />
	</view>
	<view class="package">数量：{{total}}</view>
	<scroll-view scroll-y="true" enable-back-to-top @scrolltolower="loadMore" class="scroll-box"
		:style="{ height: pageHeight + 'px' }">
		<view class="package" style="margin-top:0px" v-for="item in orderLists" :key="item.id"
			@click="navTo('administrator/rechargeOrder/rechargeDetail?id='+item.id)">
			<view class="space-between">
				<view class="center" style="margin-top:10rpx;">
					<text>单号：{{item.order_sn}}</text>
					<image src="../../../static/saleIcon/icon/copy.svg" mode="" style="width:40rpx;height: 40rpx;"
						@click.stop="copyText(item.order_sn)"></image>
				</view>
				<view>+{{item.recharge_money}}</view>
			</view>
			<view class="space-between top">
				<view>{{item.driver_name}}</view>
				<view>获得蓝宝石：{{item.money}}</view>
			</view>
			<view class="space-between top">
				<view>{{item.createtime}}</view>
				<view>{{item.status_name}}</view>
			</view>
		</view>
		<Popu v-if="orderLists.length<1" :pageHeight="pageHeight" text="暂无蓝宝石膨胀订单"></Popu>
	</scroll-view>
</template>

<script setup lang="ts">
	import { navBack, navTo } from '@/utils/navigator';
	import { ref } from 'vue';
	import { copyText } from '@/utils/copyText';
	import Popu from '@c/earthPushing/common/popu.vue';
	import { getActivityGemList } from '@/gql/auditor';
	import { onShow } from '@dcloudio/uni-app';
	import { toPublish } from '@mqtt';
	import { showLoading, errorToast } from '@/utils/prompt';
	const search = ref()
	const inquireAbout = ref(false)

	const list = [{ name: '已膨胀' }, { name: '未膨胀' }]
	const current = ref(0)
	const tabs = ref(null)

	const pageHeight = ref();
	const orderLists = ref([])
	const lastPage = ref(1);
	const currentPage = ref(1);
	const total = ref()
	uni.getSystemInfo({
		success: function (res) {
			pageHeight.value = res.windowHeight - 220;
		},
	});
	onShow(() => {
		current.value = 0
		currentPage.value = 1;
		orderLists.value = [];
		init()
	})
	function init() {
		showLoading()
		const payload = {
			query: getActivityGemList,
			variables: {
				page: currentPage.value,
				status: current.value == 0 ? 1 : 0,
				keywords: search.value,
			},
		};
		toPublish(
			'ql/control/getActivityGemList',
			payload,
			(obj : any) => {
				const { getActivityGemList } = obj.data;
				orderLists.value = [...orderLists.value, ...getActivityGemList.list];
				lastPage.value = getActivityGemList.lastpage;
				total.value=getActivityGemList.total
			}
		);
	}
	/**
	 * 加载更多
	 */
	function loadMore() {
		if (currentPage.value < lastPage.value) {
			currentPage.value++;
			init();
		}
	}
	//tabs通知swiper切换
	function tabsChange(index : number) {
		search.value = ''
		current.value = index;
		currentPage.value = 1;
		orderLists.value = [];
		init()
	}
	/**
	  * 搜索内容
	  * @property {Object} evt 监听搜索框输入信息
	  */
	function interrogate(evt : any) {
		const { detail } = evt;
		if (!detail.value && inquireAbout) {
			currentPage.value = 1;
			orderLists.value = [];
			init()
		}
	}
	/**
	 * 搜索
	 */
	function confirm() {
		if (search.value) {
			inquireAbout.value = search.value ? true : false;
			currentPage.value = 1;
			orderLists.value = [];
			init()
		} else {
			errorToast('请输入您要搜索的内容')
		}
	}
</script>

<style scoped lang="less">
	.uni-input {
		width: 100%;
		text-align: center;
		border-radius: 5px;
	}

	.top {
		margin-top: 15rpx;
	}
</style>